<template>
  <div class="price-System">
    <div class="container">
      <el-form ref="customForm" :model="customForm">
        <el-form-item>
          <el-row>
            <el-col :span="8">
              <el-select v-model="customForm.chargeModeValue">
                <el-option
                  v-for="item in chargeModeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="16" style="min-height: 400px;">
              <!-- 运输计费 -->
              <el-collapse-transition>
                <template v-if="customForm.chargeModeValue === 'transporte'">
                  <el-form-item prop="transporteCheckList">
                    <el-checkbox-group v-model="customForm.transporteCheckList">
                      <el-row>
                        <el-col :span="12">
                          <el-checkbox
                            label="box1"
                            @change="value => changeCheck('transporte', 'box1', value)"
                          >公里计费</el-checkbox>
                          <el-input
                            v-model="transporte.values.box1"
                            :disabled="transporte.disabled.box1"
                            placeholder="输入元/公里"
                          ></el-input>
                        </el-col>
                        <el-col :span="12">
                          <el-checkbox
                            label="box2"
                            @change="value => changeCheck('transporte', 'box2', value)"
                          >有无起步价</el-checkbox>
                          <el-input
                            v-model="transporte.values.box2"
                            :disabled="transporte.disabled.box2"
                            placeholder="输入起步价"
                          ></el-input>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <el-checkbox
                            label="box3"
                            @change="value => changeCheck('transporte', 'box3', value)"
                          >吨位计费</el-checkbox>
                          <el-input
                            v-model="transporte.values.box3"
                            :disabled="transporte.disabled.box3"
                            placeholder="输入元/吨"
                          ></el-input>
                        </el-col>
                        <el-col :span="12">
                          <el-checkbox
                            label="box4"
                            @change="value => changeCheck('transporte', 'box4', value)"
                          >整车计费</el-checkbox>
                          <el-input
                            v-model="transporte.values.box4"
                            :disabled="transporte.disabled.box4"
                            placeholder="输入元/车"
                          ></el-input>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <el-checkbox
                            label="box5"
                            @change="value => changeCheck('transporte', 'box5', value)"
                          >体积计费</el-checkbox>
                          <el-input
                            v-model="transporte.values.box5"
                            :disabled="transporte.disabled.box5"
                            placeholder="输入元/方"
                          ></el-input>
                        </el-col>
                        <el-col :span="12" style="padding-right:230px;">
                          <el-checkbox
                            label="box6"
                            @change="value => changeCheck('transporte', 'box6', value)"
                          >综合最大值</el-checkbox>
                        </el-col>
                      </el-row>
                    </el-checkbox-group>
                  </el-form-item>
                </template>
              </el-collapse-transition>
              <!-- 仓储计费 -->
              <el-collapse-transition>
                <template v-if="customForm.chargeModeValue === 'warehouse'">
                  <el-form-item prop="warehouseCheckList">
                    <el-checkbox-group v-model="customForm.warehouseCheckList">
                      <el-row>
                        <label for="gmtCreatedRange" class="custom-label">起止时间</label>
                        <el-date-picker
                          id="gmtCreatedRange"
                          v-model="customForm.gmtCreatedRange"
                          type="daterange"
                          :unlink-panels="true"
                          value-format="yyyy-MM-dd"
            range-separator="至"

                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          style="width: 570px"
                          :picker-options="pickerOptions"
                          @change="changeDate"
                        ></el-date-picker>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <el-form-item prop="totalDays">
                            <label class="custom-label">合计天数</label>
                            <el-input
                              v-model="customForm.totalDays"
                              placeholder="合计天数"
                              readonly="readonly"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-checkbox
                            label="box1"
                            @change="value => changeCheck('warehouse', 'box1', value)"
                          >代收手续费</el-checkbox>
                          <el-input
                            v-model="warehouse.values.box1"
                            :disabled="warehouse.disabled.box1"
                            placeholder="输入千分率"
                          ></el-input>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <el-checkbox
                            label="box2"
                            @change="value => changeCheck('warehouse', 'box2', value)"
                          >吨位计费</el-checkbox>
                          <el-input
                            v-model="warehouse.values.box2"
                            :disabled="warehouse.disabled.box2"
                            placeholder="输入元/吨"
                          ></el-input>
                        </el-col>
                        <el-col :span="12">
                          <el-checkbox
                            label="box3"
                            @change="value => changeCheck('warehouse', 'box3', value)"
                          >拆零费</el-checkbox>
                          <el-input
                            v-model="warehouse.values.box3"
                            :disabled="warehouse.disabled.box3"
                            placeholder="输入元/次"
                          ></el-input>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <el-checkbox
                            label="box4"
                            @change="value => changeCheck('warehouse', 'box4', value)"
                          >托盘计费</el-checkbox>
                          <el-input
                            v-model="warehouse.values.box4"
                            :disabled="warehouse.disabled.box4"
                            placeholder="输入元/托/天"
                          ></el-input>
                        </el-col>
                        <el-col :span="12">
                          <el-checkbox
                            label="box5"
                            @change="value => changeCheck('warehouse', 'box5', value)"
                          >二次拆零</el-checkbox>
                          <el-input
                            v-model="warehouse.values.box5"
                            :disabled="warehouse.disabled.box5"
                            placeholder="输入元/次"
                          ></el-input>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <el-checkbox
                            label="box6"
                            @change="value => changeCheck('warehouse', 'box6', value)"
                          >体积计费</el-checkbox>
                          <el-input
                            v-model="warehouse.values.box6"
                            :disabled="warehouse.disabled.box6"
                            placeholder="输入元/方"
                          ></el-input>
                        </el-col>
                        <el-col :span="12">
                          <el-checkbox
                            label="box7"
                            @change="value => changeCheck('warehouse', 'box7', value)"
                          >装卸费</el-checkbox>
                          <el-input
                            v-model="warehouse.values.box7"
                            :disabled="warehouse.disabled.box7"
                            placeholder="输入元/吨"
                          ></el-input>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <el-checkbox
                            label="box8"
                            @change="value => changeCheck('warehouse', 'box8', value)"
                          >平方计费</el-checkbox>
                          <el-input
                            v-model="warehouse.values.box8"
                            :disabled="warehouse.disabled.box8"
                            placeholder="输入元/平/月"
                          ></el-input>
                        </el-col>
                        <el-col :span="12">
                          <el-checkbox
                            label="box9"
                            @change="value => changeCheck('warehouse', 'box9', value)"
                          >入库费</el-checkbox>
                          <el-input
                            v-model="warehouse.values.box9"
                            :disabled="warehouse.disabled.box9"
                            placeholder="输入元/吨"
                          ></el-input>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <el-checkbox
                            label="box10"
                            @change="value => changeCheck('warehouse', 'box10', value)"
                          >其他费用</el-checkbox>
                          <el-input
                            v-model="warehouse.values.box10"
                            :disabled="warehouse.disabled.box10"
                            placeholder="输入费用金额"
                          ></el-input>
                        </el-col>
                        <el-col :span="12">
                          <el-checkbox
                            label="box11"
                            @change="value => changeCheck('warehouse', 'box11', value)"
                          >服务费</el-checkbox>
                          <el-input
                            v-model="warehouse.values.box11"
                            :disabled="warehouse.disabled.box11"
                            placeholder="输入元/次"
                          ></el-input>
                        </el-col>
                      </el-row>
                    </el-checkbox-group>
                  </el-form-item>
                </template>
              </el-collapse-transition>
              <!-- 配送计费 -->
              <el-collapse-transition>
                <template v-if="customForm.chargeModeValue === 'delivery'">
                  <el-form-item prop="deliveryCheckList">
                    <el-checkbox-group v-model="customForm.deliveryCheckList">
                      <el-row>
                        <el-col :span="12">
                          <el-checkbox
                            label="box1"
                            @change="value => changeCheck('delivery', 'box1', value)"
                          >公里计费</el-checkbox>
                          <el-input
                            v-model="delivery.values.box1"
                            :disabled="delivery.disabled.box1"
                            placeholder="输入元/公里"
                          ></el-input>
                        </el-col>
                        <el-col :span="12">
                          <el-checkbox
                            label="box2"
                            @change="value => changeCheck('delivery', 'box2', value)"
                          >有无起步价</el-checkbox>
                          <el-input
                            v-model="delivery.values.box2"
                            :disabled="delivery.disabled.box2"
                            placeholder="输入起步价"
                          ></el-input>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <el-checkbox
                            label="box3"
                            @change="value => changeCheck('delivery', 'box3', value)"
                          >吨位计费</el-checkbox>
                          <el-input
                            v-model="delivery.values.box3"
                            :disabled="delivery.disabled.box3"
                            placeholder="输入元/吨"
                          ></el-input>
                        </el-col>
                        <el-col :span="12">
                          <el-checkbox
                            label="box4"
                            @change="value => changeCheck('delivery', 'box4', value)"
                          >整车计费</el-checkbox>
                          <el-input
                            v-model="delivery.values.box4"
                            :disabled="delivery.disabled.box4"
                            placeholder="输入元/车"
                          ></el-input>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <el-checkbox
                            label="box5"
                            @change="value => changeCheck('delivery', 'box5', value)"
                          >体积计费</el-checkbox>
                          <el-input
                            v-model="delivery.values.box5"
                            :disabled="delivery.disabled.box5"
                            placeholder="输入元/方"
                          ></el-input>
                        </el-col>
                        <el-col :span="12">
                          <el-checkbox
                            label="box6"
                            @change="value => changeCheck('delivery', 'box6', value)"
                          >门店计费</el-checkbox>
                          <el-input
                            v-model="delivery.values.box6"
                            :disabled="delivery.disabled.box6"
                            placeholder="输入元/方"
                          ></el-input>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12" class="text-left">
                          <el-checkbox
                            label="box7"
                            @change="value => changeCheck('delivery', 'box7', value)"
                          >综合最大值</el-checkbox>
                        </el-col>
                      </el-row>
                    </el-checkbox-group>
                  </el-form-item>
                </template>
              </el-collapse-transition>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <div class="text-center">
            <el-form-item prop="remark">
              <el-input v-model="customForm.remark" placeholder="备注" style="width: 400px;"></el-input>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="text-center">
            <el-button type="primary" @click="onSubmit('customForm')">立即提交</el-button>
            <el-button @click="resetForm('customForm')">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import "xe-utils";
import VXETable from "vxe-table";
import "vxe-table/lib/index.css";
import Sortable from "sortablejs";
import XEUtils from "xe-utils";
import VXEUtils from "vxe-utils";
Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ["cookie"] });
export default {
  name: "PriceSystem",
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      chargeModeOptions: [
        { label: "运输计费", value: "transporte" },
        { label: "仓储计费", value: "warehouse" },
        { label: "配送计费", value: "delivery" }
      ],
      customForm: {
        chargeModeValue: "transporte",
        gmtCreatedStart: "",
        gmtCreatedEnd: "",
        totalDays: "",
        gmtCreatedRange: [],
        transporteCheckList: [],
        warehouseCheckList: [],
        deliveryCheckList: [],
        remark: ""
      },
      transporte: {
        values: {
          box1: "",
          box2: "",
          box3: "",
          box4: "",
          box5: "",
          box6: "",
          box7: "",
          box8: "",
          box9: "",
          box10: "",
          box11: ""
        },
        disabled: {
          box1: true,
          box2: true,
          box3: true,
          box4: true,
          box5: true,
          box6: true,
          box7: true,
          box8: true,
          box9: true,
          box10: true,
          box11: true
        }
      },
      warehouse: {
        values: {
          box1: "",
          box2: "",
          box3: "",
          box4: "",
          box5: "",
          box6: "",
          box7: "",
          box8: "",
          box9: "",
          box10: "",
          box11: ""
        },
        disabled: {
          box1: true,
          box2: true,
          box3: true,
          box4: true,
          box5: true,
          box6: true,
          box7: true,
          box8: true,
          box9: true,
          box10: true,
          box11: true
        }
      },
      delivery: {
        values: {
          box1: "",
          box2: "",
          box3: "",
          box4: "",
          box5: "",
          box6: "",
          box7: "",
          box8: "",
          box9: "",
          box10: "",
          box11: ""
        },
        disabled: {
          box1: true,
          box2: true,
          box3: true,
          box4: true,
          box5: true,
          box6: true,
          box7: true,
          box8: true,
          box9: true,
          box10: true,
          box11: true
        }
      }
    };
  },
  created() {},
  methods: {
    changeCheck(module, item, value) {
      // 输入权限
      this[module].disabled[item] = !value;
      // 置空
      // if (!value) this[module].values[item] = "";
    },
    changeDate(value) {
      if (value) {
        this.customForm.gmtCreatedStart = value[0];
        this.customForm.gmtCreatedEnd = value[1];
        this.customForm.totalDays = this.datedifference(value[0], value[1]);
      } else {
        this.customForm.gmtCreatedStart = "";
        this.customForm.gmtCreatedEnd = "";
        this.customForm.totalDays = "";
      }
    },
    /**
     * 两个时间相差天数
     * @param {String} sDate1 yyyy-MM-dd
     * @param {String} sDate2 yyyy-MM-dd
     */
    datedifference(sDate1, sDate2) {
      var dateSpan, iDays;
      sDate1 = Date.parse(sDate1);
      sDate2 = Date.parse(sDate2);
      dateSpan = sDate2 - sDate1;
      dateSpan = Math.abs(dateSpan);
      iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
      return iDays;
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.customForm.gmtCreatedRange = [];
    },
    // 提交
    onSubmit(formName) {
      this.$message({ message: '提交成功！', type: "success" });
    }
  }
};
</script>

<style lang="scss" scoped>
.price-System {
  padding-top: 30px;
  .container {
    border: 1px solid #ebebeb;
    border-radius: 3px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
    .custom-label {
      display: inline-block;
      width: 100px;
      margin-right: 30px;
      padding-left: 24px;
      line-height: 19px;
      font-size: 14px;
      color: #606266;
      font-weight: 500;
      cursor: pointer;
      text-align: left;
      white-space: nowrap;
    }
  }
}
.text-left {
  text-align: left !important;
}
.text-right {
  text-align: right !important;
}
.text-center {
  text-align: center !important;
}
.el-col-12 {
  &:last-child {
    text-align: right;
  }
}
.el-input {
  width: 200px;
}
.el-checkbox {
  width: 100px;
  text-align: left;
}
.el-col {
  height: 46px;
}
</style>
